<template>
  <fullScreenContainer :leftList="menuList" :rightList="rightList" title="湖南省农业优势特色产业集群信息系统" type="fullScreenContainer">
    <template slot="leftContent">
      <Panel key="jdfj" v-model="tabs_value" :tabs="tabs" @change="change" height="100%">
        <div class="jdfj-total">
          <div class="text">加工企业</div>
          <div class="number">{{ jgjgqy }}</div>
          <div class="unit">家</div>
        </div>
        <div class="jdfj-tabs1">
          <tabs1 v-model="tabs1_value" :tabs="[{ name: '按企业规模分析', value: '1' }]"></tabs1>
        </div>
        <div class="jdfj-box">
          <div class="jdfj-left-box" v-for="item in cygk1">
            <img :src="home" alt="" srcset="" />
            <div class="jdfj-right-box-1">
              <div class="right-top" style="justify-content: center;">
                <span class="number">{{ item.number }}</span>
                <span class="text">家</span>
              </div>
              <div class="right-bottom" style="text-align: center;">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="jdfj-tabs1">
          <tabs1 v-model="tabs1_value" :tabs="[{ name: '按企业区域分析', value: '1' }]"></tabs1>
        </div>
        <div class="jdfj-tabs2" style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          ">
          <tabs2 v-model="tabs2_valuea" :is-cancel="true" :tabs="[
    { name: '全部', value: '0' },
    { name: '综合性加工', value: '1' },
    { name: '初加工', value: '2' },
    { name: '精加工', value: '3' },
  ]" @change="tabs_change"></tabs2>
        </div>
        <div class="jdfj-bar">
          <echartsDemo key="top" title="家" :initData="qyqyfx" :initChart="topChart"></echartsDemo>
        </div>
      </Panel>
    </template>
    <template slot="rightContent">
      <Panel key="jdfj2" :tabs="[{ name: '产值趋势分析', value: '1' }]" height="40%">
        <template slot="right">
          <!-- 更多 -->
          <cselect v-model="select1_value" :dropList="orgList" @change="orgChange"></cselect>
        </template>
        <div class="table1-box">
          <scroll rowStyle="content_tr_center" :runSpeed="22" :scrollContentHeight="260"
            :columnsConfg="learDataColumnsConfg" :rowdata="rowdata">
            <template slot="name" slot-scope="{ data }">
              <span @click="text(data)" style="color: #3bd6ac;">
                2023
              </span>
            </template>
          </scroll>
        </div>
      </Panel>
      <Panel key="jdfj22" :tabs="[{ name: '产业集群项目二产投资情况分析', value: '1' }]" height="60%">
        <div class="jdfj-box">
          <div class="jdfj-left-box" style="height: 177px;" v-for="item in cygk2">
            <img :src="home" alt="" srcset="" />
            <div class="jdfj-right-box-1">
              <div class="right-top" style="text-align: center;">
                <span class="number">{{ item.number }}</span>
                <span class="text">{{ item.unit }}</span>
              </div>
              <div class="right-bottom" style="text-align: center;">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="jdfj-tb">
          <echartsDemo key="zcqk" :initData="zcqk" :initChart="barChart"></echartsDemo>
        </div>
      </Panel>
    </template>
    <template slot="fullScreenMap">
      <div class="map-page-container">
        <Map ref="Map"></Map>
      </div>
    </template>
    <template slot="centerContent">
      <map-tools @iconChange="iconChange"></map-tools>
    </template>
  </fullScreenContainer>
</template>
<script>
import Map from '@/Iframe/kcgis3x.vue'
import MapTools from '@/layout/components/Center/index.vue'
import EchartsDemo from '@/echartsDemo/index.vue'
import menuList, { rightList } from './menu'
import home from './box1.png'
import echartsDemo from '@/echartsDemo/index.vue'
import tabs1 from '../templateBigScreen/tabs1.vue'
import tabs2 from '../templateBigScreen/tabs2.vue'
import pieChart from '../templateBigScreen/pieChart'
import topChart from '../templateBigScreen/topChart'
import barChart from './barChart'
import box2 from '../templateBigScreen/box2.vue'
import box3 from '../templateBigScreen/box3.vue'
import cselect from './Select/index.vue'
import scroll from '../templateBigScreen/scroll.vue'
import { getChartData, ztyztqk, getOutputValueList } from "@/apis/bigOneIndex";

export default {
  components: {
    Map,
    MapTools,
    tabs1,
    echartsDemo,
    box2,
    box3,
    tabs2,
    cselect,
    scroll,
  },

  data() {
    return {
      menuList,
      rightList,
      tabs2_valuea: '0',
      home,
      pieChart,
      barChart,
      topChart,
      tabs1_value: '1',
      select1_value: '',
      tabs2_value: '1',
      tabs: [
        {
          name: '加工企业分析',
          value: '1',
        },
      ],
      tabs_value: '1',
      learDataColumnsConfg: [
        {
          label: '年份',
          prop: 'belongYear',
          width: '15%',
          paddingLeft: '0px',
        },
        {
          label: '加工基地',
          prop: 'baseName',
          width: '25%',
          paddingLeft: '0px',
        },
        {
          label: '二产产量(吨)',
          prop: 'yieldValue',
          width: '30%',
          paddingLeft: '0px',
        },
        {
          label: '二产产值(万元)',
          prop: 'outputValue',
          width: '30%',
          paddingLeft: '0px',
        },
      ],
      rowdata: [

      ],
      cygk1: [
        {
          number: '0',
          unit: '家',
          name: '国家龙头企业',
        },
        {
          number: '0',
          unit: '家',
          name: '省级龙头企业',
        },
        {
          number: '0',
          unit: '家',
          name: '市级龙头企业',
        },
        {
          number: '1774',
          unit: '家',
          name: '其他',
        }
      ],
      cygk2: [
      ],
      qyqyfx: [

      ],
      zcqk: {

      },
      layerType: "",
      jgjgqy: 0,
      orgList: [
      { label:'全省',value:''},
      { label: '长沙市',value:'长沙市'},
      { label: '株洲市',value:'株洲市'},
      { label: '湘潭市',value:'湘潭市'},
      { label: '衡阳市',value:'衡阳市'},
      { label: '邵阳市',value:'邵阳市'},
      { label: '常德市',value:'常德市'},
      { label: '张家界市',value:'常德市'},
      { label: '益阳市',value:'益阳市'},
      { label: '郴州市',value:'郴州市'},
      { label: '永州市',value:'永州市'},
      { label: '岳阳市',value:'岳阳市'},
      { label: '怀化市',value:'怀化市'},
      { label: '娄底市',value:'娄底市'},
      ],
    }
  },
  created() {
    this.getData();
  },
  methods: {
    change(value) {
      console.log(value, 'value')
    },
    orgChange(value){debugger
      this.select1_value  =value;
      this.getOutputValueList();
    },
    tabs_change(value) {

      console.log(value)
      this.getChartData1(this.layerType);
    },
    text() { },
    iconChange(data) {
      debugger
      let layerTypeList = data.filter(item => {
        return item.checked;
      });
      let layerType = layerTypeList.map(item => item.value).join(",");
      this.layerType = layerType;
      this.getData(layerType);
    },
    getData(layerType) {
      this.getChartData1(layerType);
      this.getChartData2(layerType);
      this.getChartData3(layerType);
      this.getChartData4(layerType);
      this.getZtyztqk(layerType);
      this.getOutputValueList();
    },
    getZtyztqk(layerType) {
      let params = { "layerType": layerType };
      ztyztqk(params).then(res => {
        //executeOorgname,zs
        this.jgjgqy = res.data.jgjgqy || 0;
      });
    },
    getChartData1(layerType) {
      let chartName = "加工专题-按企业区域分析-全部";
      switch (this.tabs2_valuea) {
        case "0": chartName = "加工专题-按企业区域分析-全部"; break;
        case "1": chartName = "加工专题-按企业区域分析-综合性加工"; break;
        case "2": chartName = "加工专题-按企业区域分析-初加工"; break;
        case "3": chartName = "加工专题-按企业区域分析-精加工"; break;
        default: chartName = "加工专题-按企业区域分析-全部";
      }
      let params = { "layerType": layerType, "chartName": chartName };
      getChartData(params).then(res => {
        //executeOorgname,zs
        this.qyqyfx = [];
        res.data.forEach(e => {
          var data = { "executeOorgname": e.name, "zs": e.value }
          this.qyqyfx.push(data);
        });
      });
    },
    getChartData2(layerType) {
      let params = { "layerType": layerType, "chartName": "加工专题-产业集群项目二产投资情况分析-行业" };
      getChartData(params).then(res => {
        //executeOorgname,zs
        this.cygk2 = [];
        res.data.forEach((e, index) => {
          var data = { "number": e.value, "unit": "万元", "name": e.name };
          if (index < 4) {
            this.cygk2.push(data);
          }
        });
      });
    },
    getChartData3(layerType) {
      let params = { "layerType": layerType, "chartName": "加工专题-产业集群项目二产投资情况分析-区域" };
      getChartData(params).then(res => {
        debugger //executeOorgname,zs
        this.zcqk = {};
        this.zcqk = this.formatChartData(res.data);

      });
    },
    getChartData4(layerType) {
      let params = { "layerType": layerType, "chartName": "加工专题-按企业规模分析" };
      getChartData(params).then(res => {
        //executeOorgname,zs
        this.cygk1 = [];
        res.data.forEach((e, index) => {
          var data = { "number": e.value, "unit": "家", "name": e.name };
          if (index < 5) {
            this.cygk1.push(data);
          }
        });
        this.cygk1.sort(function (a, b) {
          let a1, b1;
          if (a.name.includes("国家")) {
            a1 = 0;
          } else if (a.name.includes("省")) {
            a1 = 1;
          } else if (a.name.includes("市")) {
            a1 = 2;
          } else if (a.name.includes("其他")) {
            a1 = 3;
          }
          if (b.name.includes("国家")) {
            b1 = 0;
          } else if (b.name.includes("省")) {
            b1 = 1;
          } else if (b.name.includes("市")) {
            b1 = 2;
          } else if (b.name.includes("其他")) {
            b1 = 3;
          }
          return a1 - b1;
        });
      });
    },
    getOutputValueList(layerType) {
      let params = { "pageNum": 1, "pageSize": 10, "layerType": this.layerType, "belong": "加工专题" ,"area": this.select1_value };
      getOutputValueList(params).then(res => {
        debugger
        this.rowdata = res.rows;
      });
    },
    formatChartData(data) {
      let legendData = [];
      let seriesData = [];
      let result = {};
      data.forEach(e => {
        legendData.push(e.name);
        seriesData.push({ "name": e.name, "value": e.value });
      });
      result.legendData = legendData;
      result.xAxisData = legendData;
      result.seriesData = seriesData;
      return result;
    }
  },
  mounted() { },
}
</script>
<style scoped lang="scss">
.jdfj-box {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.table1-box {
  width: 100%;
}

.jdfj-tabs1 {
  margin-top: 32px;
}

.jdfj-tabs2 {
  margin-top: 18px;

  span {
    font-family: Source Han Sans;
    font-size: 12px;
    font-weight: normal;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 2px;

    font-variation-settings: 'opsz' auto;
    font-feature-settings: 'kern' on;
    /* 文字色 */
    color: #c2e5ff;
    cursor: pointer;
    z-index: 0;
  }
}

.jdfj-left-box {
  width: 83px;
  height: 145px;
  border-radius: 5px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  background: linear-gradient(180deg,
      rgba(59, 214, 172, 0.1) 0%,
      rgba(59, 214, 172, 0) 100%);

  z-index: 0;

  .jdfj-right-box-1 {
    .right-top {
      margin-top: 26px;
      opacity: 1;
      /* 自动布局 */
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 5px;
      z-index: 0;

      .number {
        font-family: DIN;
        font-size: 24px;
        font-weight: bold;
        line-height: 24px;
        letter-spacing: 0em;

        font-variation-settings: 'opsz' auto;
        background: linear-gradient(180deg, #d5fff5 15%, #8cd9c5 84%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        z-index: 0;
      }

      .text {
        opacity: 0.8;
        font-family: 思源黑体;
        font-size: 14px;
        font-weight: 350;
        line-height: 14px;
        letter-spacing: 0em;

        /* 纯白 */
        color: #ffffff;

        z-index: 1;
      }
    }

    .right-bottom {
      height: 21px;
      opacity: 1;

      font-family: 思源黑体;
      font-size: 14px;
      font-weight: normal;
      line-height: normal;
      text-transform: uppercase;
      letter-spacing: 1px;

      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      /* 文字白 */
      color: #ffffff;

      z-index: 1;
      margin-top: 10px;
    }
  }
}

.jdfj-tz {
  margin-top: 32px;
}

.jdfj-tb {
  width: 100%;
  height: 300px;
  margin-top: 16px;
}

.flex1 {
  margin-top: 20px;
}

.jdfj-total {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;

  .text {
    /* 文字小 */
    font-family: Microsoft YaHei;
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;
    letter-spacing: 0em;

    /* 文字色 */
    color: #d0fff2;

    z-index: 1;
  }

  .number {
    /* 数字1 */
    font-family: DIN;
    font-size: 36px;
    font-weight: bold;
    line-height: 36px;
    text-align: right;
    letter-spacing: 0px;

    background: linear-gradient(180deg, #d5fff5 15%, #8cd9c5 84%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    z-index: 2;
  }

  .unit {
    font-family: 思源黑体;
    font-size: 14px;
    font-weight: normal;
    line-height: 28px;
    letter-spacing: 0px;

    color: rgba(255, 255, 255, 0.6);

    z-index: 3;
  }
}

.jdfj-bar {
  margin-top: 18px;
  height: 512.68px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  flex-grow: 1;
  align-self: stretch;

  z-index: 2;
}
</style>
